<template>
    <div>
        <Header></Header>
        <common-header>
            <template v-slot:title>
                结算页
            </template>
        </common-header>
        <el-divider></el-divider>
        <el-row>
            <el-col :span="16" :offset="4">
                <el-card>
                    <div slot="header" class="clearfix">
                        <span style="font-size: 17px; font-weight: 700;">收货人地址</span>
                        <el-button 
                            style="float: right; padding: 3px 0" 
                            @click="addressccc"
                            type="text">更换收货地址</el-button>
                        <el-button 
                            style="float: right; padding: 3px 0" 
                            @click="showEditDialog"
                            
                            type="text">     </el-button>
                        <el-button 
                            style="float: right; padding: 3px 0" 
                            @click="showEditDialog"
                            type="text">新增收货地址</el-button>
                    </div>
                    <!-- <template> -->
                    <!-- 在这里弄一个可选项 或者下拉框  在这里对其进行选择地址  可以在data里面创建一个   这里可以选择切换一下表单  需要在element上查询 -->
                    <div style="font-size: 14px;">
                        <el-input
                            type="textarea"
                            :autosize="{ minRows: 1, maxRows: 1}"
                            :disabled="true "
                            v-model="addrs">
                        </el-input>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-col :span="16" :offset="4">
            <el-table
                :data="shoppmessage"
                style="width: 100%"
            >
                <el-table-column label="商品">
                    <template slot-scope="scope">
                        <div class="item"> 
                            <el-image class="item-pic" :src="scope.row.pic"></el-image>
                            <p class="item-title">
                                {{scope.row.title}}
                            </p>
                        </div> 
                    </template>
                </el-table-column>

                <el-table-column label="单价" prop="price" width="120"></el-table-column>
                <el-table-column label="数量" prop="num">
                </el-table-column>
                <el-table-column label="小计">
                <template slot-scope="scope">
                    <span style="font-weight: 600">
                            ￥{{scope.row.price * scope.row.num}}
                    </span> 
                    </template> 
                </el-table-column>
            </el-table>
            <el-card class="settle-info">
                <div>
                    <p class="tr">
                        <span class="info">{{shoppmessage.length}}</span>
                        件商品, 应付总额: 
                        <span class="info">￥{{price}}</span></p>
                    <br>
                    <p class="tr">  
                        <el-input
                            type="textarea"
                            :autosize="{ minRows: 1, maxRows: 1}"
                             :disabled="true "
                            v-model="addrs">
                        </el-input>
                    </p>
                </div>
            </el-card>
            <!-- <router-link to="/settle"> -->
                <el-button type="danger" @click="buttonSubmit" style="float: right;">提交订单</el-button>
        </el-col>
        <edit-address ref="editDialog" @add-comment="appendComment"></edit-address>
        <address-change ref="editAddr" @add-comment-two="shuaxinFather" @showaddr="updateaddr"></address-change>
    </div> 
    <!-- :sendData="addrs" -->
</template>

<script>

import CommonHeader from '@/components/CommonHeader'
import Header from '@/components/Index/Header'
import EditAddress from '@/components/Settle/EditAddress'
// import axios from 'axios'
import http from "../core/HttpRequest"
import AddressChange from '@/components/Settle/AddressChange'

export default {
    components: {
        CommonHeader,
        Header,
        EditAddress,
        AddressChange,
    },
    data: () => ({
        num:'',//从前一个页面返回的数据
        userId:0,
        showMore: true,
        address:[],
        addrs:'',
        name:'',
        shoppmessage:[],
        price:0,
        jsons: 
            {
                userId:0,//用户id
                shopId:'',//商品id
            }
    }),
    mounted:function(){

        //查询id
        // console.log(JSON.parse(this.$route.query.shoppingCartId))
        this.num=this.$cookies.get("shoppingCartId")
        let uname =this.$cookies.get("username")
        this.name = uname
        let username = new URLSearchParams()
         username.append('userName', this.name),
          http({
              method: "post",
              url: `/orderNum/id`,
              data: username
          })
        .then(res => {
            this.userId = res.data.data
            this.queryIdSe()
        })
    },
    methods: {
        appendComment () {
            this.$router.go(0)
        },
        shuaxinFather() {
            this.$router.go(0)
        },
        updateaddr(dataadd){
            this.addrs=dataadd.newaddr
        },
        showEditDialog() {
            this.$refs.editDialog.showEditDialog = true
        },
        addressccc() {
            this.$refs.editAddr.showEditDialog = true
        },
        //点击按键进行结算  返回一个订单id可以不用返回
        buttonSubmit(){
            let goods = new URLSearchParams()
            // goods.append('len',2)
            goods.append('userId', this.userId),
            goods.append('shopId', this.num),
            // goods.append('actualAmount',10)

            http({
                    method: "post",
                    url: `/orderNum/goodsMessage`,
                    data: goods
                })
                .then(res => {
                
                    this.movies = res.data.data.hot
                let address = new URLSearchParams()
                address.append('checkedShoppingCartId', this.num), 
                 
                http({
                    method: "post",
                    url: `/shoppingCart/deleteCheckedCart`,
                    data: address
                }).then(() => {
                    this.$router.push({
                        path: `/my-order`,
                    })
                })
                })

            
        },
        queryIdSe(){
                    //根据ID去渲染
            let param = new URLSearchParams()
            param.append('userId', this.userId),
            param.append("shoppingId",this.num) 
            http({
                method: "post",
                url: `/orderNum/all`,
                data: param
            })
            .then(res=> {
                this.shoppmessage = res.data.data
                for(var i = 0;i<this.shoppmessage.length;i++){
                    this.price+=this.shoppmessage[i].price*this.shoppmessage[i].num
                }
                this.movies = res.data.data.hot
            })

            //根据ID获取用户默认地址
            let address = new URLSearchParams()
            address.append('userId', this.userId),  
            http({
                method: "post",
                url: `/orderNum/selectOne`,
                data: address
            })
            .then(res=> {
                let addrOne = res.data.data
                this.addrs = addrOne.receiverName+'  '+addrOne.receiverMobile+'   '+addrOne.province+'   '+addrOne.city+'   '+addrOne.area+'  '+ addrOne.addr
                this.movies = res.data.data.hot
            })
        }
    }
}
</script>

<style scoped>
    .default-address {
        background-color: #e3e3e3;
        padding: 3px 5px;
        float: right;
        position: relative;
        top: -2px;
    }
    .mr10 {
        margin-right: 10px;
    }
    .address-info {
        margin-bottom: 10px;
    }
    .edit-btn {
        float: right !important; 
        padding: 0;
    }
    .item {
        display: flex;
    }
    .item .item-pic {
        width: 60px;
        height: 60px;
    }
    .tr {
        text-align: right;
    }
    .item .item-title {
        padding-left: 8px; 
        width: 180px;
    }
    .settle-info {
        margin: 10px 0;
        font-size: 14px;
    }
    .settle-info .info {
        color: #F56C6C; 
        font-weight: 700;
        font-size: 15px;
    }
</style>